import React, { Component } from 'react';
import {
  Animated,
  Easing,
  TextInput,
  Text,
  StyleSheet,
  View,
} from 'react-native';

class RefView extends Component {
    // 构造
    constructor(props) {
      super(props);
      // 初始状态
      this.state = {
        textInputValue: '文字提示'
      };
      this.buttonPressed = this.buttonPressed.bind(this);
    }

    buttonPressed() { //当按钮按下的时候执行此函数
      //修改文本输入框的属性值 变为了不可编辑
      this.refs.textInputRefer.setNativeProps({
        editable:false
      });
      this.refs.text2.setNativeProps({
        style:{
          color:'blue',
          fontSize:30
        }
      });
    }

    render() {
      return (
          //ref={'text2'}>   //指定本组件的引用名
          <View style={styles.container}>
              <Text style={styles.buttonStyle} onPress={this.buttonPressed}>
                  按我
              </Text>
              <Text style={styles.textPromptStyle} ref="text2">
                  {this.state.textInputValue}
              </Text>
            <View>
              <TextInput style={styles.textInputStyle}
                ref="textInputRefer"
                // value={"input content"}
                onChangeText={(textInputValue)=>this.setState({textInputValue})}
              />
            </View>
              <View></View>
        </View>
      );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        margin: 100,
    },
    buttonStyle: { //文本组件样式,定义简单的按钮
        fontSize: 20,
        width : 100,
        height : 50,
    },
    textPromptStyle: { //文本组件样式
        fontSize: 20,
         height : 50,
    },
    textInputStyle: { //文本输入组件样式
        height: 50,
        fontSize: 20,
        color: 'red',
    }
});

export default RefView;
